import HeaderComponent from '@/components/HeaderComponent/HeaderComponent';

import { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import './RecommendationNetwork.less';

import { getTeam } from '@/api/module/user';
import { useAppSelector } from '@/hooks/useAppSelector';
import { DownFill } from 'antd-mobile-icons';
import { InfiniteScroll } from 'antd-mobile';
import InfiniteScrollContent from '@/components/InfiniteScrollContentComponent/InfiniteScrollContentComponent';

const NetComponent = () => {
  const { t } = useTranslation();
  const userInfo = useAppSelector((state) => state.userInfo.userInfo);
  const idList = useRef<number[]>([]);
  const [page, setPage] = useState(1);
  const [data, setData] = useState<
    Awaited<ReturnType<typeof getTeam>>['data']['list_data']
  >([]);
  const [hasMore, setHasMore] = useState(true);

  async function loadMore() {
    const res = await getTeam({
      user_id: idList.current.length
        ? idList.current[idList.current.length - 1] + ''
        : userInfo.user_id + '',
      page: page + '',
    });
    res.data.list_data = [
      {
        user_id: 1,
        address: '0x1234567890123456789012345678901234567890',
        level: 1,
        regdate: '2022-01-01',
        invite_number: 10,
      },
    ];
    setPage(page + 1);
    setData(res.data.list_data);
    setHasMore(res.data.total_page > +res.data.page_on);
  }

  const toNextNode = (id: number) => {
    return;
    idList.current.push(id);
    setHasMore(true);
    setPage(1);
  };
  const previousNode = () => {
    idList.current.pop();
    setHasMore(true);
    setPage(1);
  };
  return (
    <div className="mt-4">
      {idList.current.length ? (
        <div className="flex justify-center mb-4">
          <DownFill
            className="rotate-180"
            onClick={previousNode}
            width={24}
            height={24}
            color="#e99434"
          />
        </div>
      ) : (
        ''
      )}
      <div
        className="overflow-y-scroll"
        style={{
          maxHeight: 'calc(100vh - 4rem)',
        }}
      >
        {data.map((item) => {
          return (
            <>
              <div
                onClick={() => toNextNode(item.user_id)}
                className="bg-bg-1 rounded-lg collapse-panel relative p-4 flex justify-between items-center"
              >
                <div className="text-white-1 text-xs">
                  <div className="flex justify-between items-center">
                    <div className="id w-1/2">
                      {t('ID')}: {item.user_id}
                    </div>
                    <div className="number w-1/2">
                      {t('numberOfPeople')}: {item.invite_number}
                    </div>
                  </div>
                  <div className="address mt-2">
                    {t('address')}: {item.address}
                  </div>
                  <div className="mt-2">
                    {t('date')}: {item.regdate}
                  </div>

                  {/* <div className="text-white-1 absolute -bottom-4 translate-y-1/2 left-1/2 -translate-x-1/2">
                      <Image src={getAssetsFile("net-next.png" width={16} />
                    </div> */}
                </div>
                {/* <Image width={16} src={getAssetsFile('net-icon.png')} /> */}
              </div>
            </>
          );
        })}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
          <InfiniteScrollContent hasMore={hasMore} />
        </InfiniteScroll>
      </div>
    </div>
  );
};
export default function RecommendationNetwork() {
  return (
    <div className="px-2 text-white-1">
      <HeaderComponent title="recommendationNetwork" />
      <NetComponent />
    </div>
  );
}
